<template>
	<view>
		<cu-custom bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">地图选点</block>
		</cu-custom>
		<view class="">
<!-- 			<button class="cu-btn bg-blue lg margin-bottom margin-right" @click="GetNowCityInfo">获取当前城市信息</button>
			<button class="cu-btn bg-blue lg margin-bottom margin-right" @click="GetLocation">获取经纬度</button> -->
			<!-- <button class="cu-btn bg-blue lg margin-bottom margin-right" @click="GetLocation">地图选点</button> -->
			<view class="padding flex flex-direction">
				<button class="cu-btn lg bg-blue shadow" @click="GetLocation">获取经纬度</button>
			</view>
<!-- 			您已选择：{{chooseLocation}} -->
		</view>
	</view>
</template>

<script>
	// 引入SDK核心类
	import QQMapWX from '@/common/js/qqmap-wx-jssdk.min.js'
	// const chooseLocation = requirePlugin('chooseLocation');
	export default {
		data() {
			return {
				chooseLocation: '中国',
			};
		},
		onLoad() {
			this.GetLocation();
		},
		onShow() {
			const chooseLocation = requirePlugin('chooseLocation');
			const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
			console.log("您所选择的位置：", location);
			if(location != null){
				this.$store.commit('SET_LAT',location.latitude)//经度
				this.$store.commit('SET_LON',location.longitude)//纬度
				this.$store.commit('SET_ADDRESS',location.address)//详细地址
				uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
				    delta: 1
				});
			}
			if (location) {
				this.chooseLocation = location.address;
			}

		},
		onUnload() {
			const chooseLocation = requirePlugin('chooseLocation');
			// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
			chooseLocation.setLocation(null);
		},
		methods: {
			// 获取经纬度
			GetLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log(res)
				  console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);

						that.GetNowCityInfo(res) //获取城市信息
					}
				});
			},

			// 获取当前城市信息
			GetNowCityInfo(lag) {
				let that = this
				let qqmapsdk = new QQMapWX({
					key: 'A4QBZ-T6R3G-XLBQJ-IW6X2-S4QPE-NABWA' //腾讯地图 - 申请开发者密钥（key）
				});
				qqmapsdk.reverseGeocoder({
					location: {
						longitude: lag.longitude,
						latitude: lag.latitude
					},
					success(res) {
						console.log('当前位置信息', res)
						if (res.status == 0 && res.message == "query ok") {
							let city = res.result.address_component.city;
						}
						that.getAddress(res.result.location.lat,res.result.location.lng)
						
					}
				})
			},
			//地图选点
			getAddress(lat,lng) {
				const key = 'A4QBZ-T6R3G-XLBQJ-IW6X2-S4QPE-NABWA'; //使用在腾讯位置服务申请的key
				const referer = '即日办'; //调用插件的app的名称
				const location = JSON.stringify({
					latitude: lat,
					longitude: lng
				});
				const category = '生活服务,娱乐休闲';

				wx.navigateTo({
					url: `plugin://chooseLocation/index?key=${key}&referer=${referer}&location=${location}&category=${category}`
				});
			},
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>
